<script setup lang="ts">
import { BankOutlined, CopyOutlined } from '@ant-design/icons-vue';
import { storeToRefs } from 'pinia';

import { errimage } from '#/base';
import { link1688stor } from '#/store';
import { copyToClipboard } from '#/utils';

const link1688 = link1688stor();
const { deteail } = storeToRefs(link1688);
</script>

<template>
  <div>
    <a-space>
      <a-image
        :fallback="errimage"
        :src="deteail.mainPic"
        :width="54"
        style="border-radius: 8px"
      />
      <a-space :size="2" direction="vertical">
        <a-space>
          <a-tooltip>
            <template #title>{{ deteail.goodsTitle }}</template>
            <div class="w-72 truncate">{{ deteail.goodsTitle }}</div>
          </a-tooltip>
          <a-button
            shape="round"
            size="small"
            type="link"
            @click="
              () => {
                copyToClipboard(deteail.goodsTitle);
              }
            "
          >
            <template #icon>
              <CopyOutlined class="text-xs" />
            </template>
          </a-button>
        </a-space>
        <a-space>
          <a-tag color="orange">
            <BankOutlined /> {{ deteail.shopName }}
          </a-tag>
          <a-space>
            <span>
              商品ID：<a
                :href="`https://haohuo.jinritemai.com/ecommerce/trade/detail/index.html?id=${deteail.productId}&origin_type=604`"
                target="_blank"
              >
                {{ deteail.productId }}
              </a>
            </span>
            <a-button
              shape="round"
              size="small"
              type="link"
              @click="
                () => {
                  copyToClipboard(deteail.productId);
                }
              "
            >
              <template #icon>
                <CopyOutlined class="text-xs" />
              </template>
            </a-button>
          </a-space>
        </a-space>
      </a-space>
    </a-space>
  </div>
</template>
